* {padding:0;margin:0}

/* qfPage */
.qf-page {
    span {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #000;
        color: #fff;
        &:hover{color:yellow;cursor: pointer;}
    }

    // span:hover{color:yellow}
}

/* qfDialog */
.qf-dialog {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    position: fixed;
    z-index: 2;
    top:0;
    left:0;

    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    .box {
        width: 300px;
        height: 400px;
        color: #000;
        background-color: #fff;
    }

    header {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    main {
        height: 300px;
    }
    footer {
        height: 50px;
    }
}
/* loading2 */
.qf-loading2 {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    position: fixed;
    z-index: 2;
    top:0;
    left:0;

    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 30px;
}
/* loading1 */
.qf-loading1  {
    width: 80px;
    height: 40px;
    margin: 0 auto;
    margin-top:100px;
}
.qf-loading1 span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }
}
.qf-loading1 span:nth-child(2){
    -webkit-animation-delay:0.2s;
}
.qf-loading1 span:nth-child(3){
    -webkit-animation-delay:0.4s;
}
.qf-loading1 span:nth-child(4){
    -webkit-animation-delay:0.6s;
}
.qf-loading1 span:nth-child(5){
    -webkit-animation-delay:0.8s;
}

/* 按钮qfButton */

.qf-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px
}

.qf-button+.qf-button {
    margin-left: 10px
}

.qf-button.is-round {
    padding: 12px 20px
}

.qf-button:focus,.qf-button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff
}

.qf-button:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: none
}

.qf-button::-moz-focus-inner {
    border: 0
}

.qf-button [class*=qf-icon-]+span {
    margin-left: 5px
}

.qf-button.is-plain:focus,.qf-button.is-plain:hover {
    background: #fff;
    border-color: #409eff;
    color: #409eff
}

.qf-button.is-plain:active {
    background: #fff;
    outline: none
}

.qf-button.is-active,.qf-button.is-plain:active {
    border-color: #3a8ee6;
    color: #3a8ee6
}

.qf-button.is-disabled,.qf-button.is-disabled:focus,.qf-button.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5
}

.qf-button.is-disabled.qf-button--text {
    background-color: transparent
}

.qf-button.is-disabled.is-plain,.qf-button.is-disabled.is-plain:focus,.qf-button.is-disabled.is-plain:hover {
    background-color: #fff;
    border-color: #ebeef5;
    color: #c0c4cc
}

.qf-button.is-loading {
    position: relative;
    pointer-events: none
}

.qf-button.is-loading:before {
    pointer-events: none;
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: inherit;
    background-color: hsla(0,0%,100%,.35)
}

.qf-button.is-round {
    border-radius: 20px;
    padding: 12px 23px
}

.qf-button.is-circle {
    border-radius: 50%;
    padding: 12px
}

.qf-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff
}

.qf-button--primary:focus,.qf-button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff
}

.qf-button--primary:active {
    outline: none
}

.qf-button--primary.is-active,.qf-button--primary:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff
}

.qf-button--primary.is-disabled,.qf-button--primary.is-disabled:active,.qf-button--primary.is-disabled:focus,.qf-button--primary.is-disabled:hover {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff
}

.qf-button--primary.is-plain {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff
}

.qf-button--primary.is-plain:focus,.qf-button--primary.is-plain:hover {
    background: #409eff;
    border-color: #409eff;
    color: #fff
}

.qf-button--primary.is-plain:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
    outline: none
}

.qf-button--primary.is-plain.is-disabled,.qf-button--primary.is-plain.is-disabled:active,.qf-button--primary.is-plain.is-disabled:focus,.qf-button--primary.is-plain.is-disabled:hover {
    color: #8cc5ff;
    background-color: #ecf5ff;
    border-color: #d9ecff
}

.qf-button--success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a
}

.qf-button--success:focus,.qf-button--success:hover {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff
}

.qf-button--success:active {
    outline: none
}

.qf-button--success.is-active,.qf-button--success:active {
    background: #5daf34;
    border-color: #5daf34;
    color: #fff
}

.qf-button--success.is-disabled,.qf-button--success.is-disabled:active,.qf-button--success.is-disabled:focus,.qf-button--success.is-disabled:hover {
    color: #fff;
    background-color: #b3e19d;
    border-color: #b3e19d
}

.qf-button--success.is-plain {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0
}

.qf-button--success.is-plain:focus,.qf-button--success.is-plain:hover {
    background: #67c23a;
    border-color: #67c23a;
    color: #fff
}

.qf-button--success.is-plain:active {
    background: #5daf34;
    border-color: #5daf34;
    color: #fff;
    outline: none
}

.qf-button--success.is-plain.is-disabled,.qf-button--success.is-plain.is-disabled:active,.qf-button--success.is-plain.is-disabled:focus,.qf-button--success.is-plain.is-disabled:hover {
    color: #a4da89;
    background-color: #f0f9eb;
    border-color: #e1f3d8
}

.qf-button--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c
}

.qf-button--warning:focus,.qf-button--warning:hover {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff
}

.qf-button--warning:active {
    outline: none
}

.qf-button--warning.is-active,.qf-button--warning:active {
    background: #cf9236;
    border-color: #cf9236;
    color: #fff
}

.qf-button--warning.is-disabled,.qf-button--warning.is-disabled:active,.qf-button--warning.is-disabled:focus,.qf-button--warning.is-disabled:hover {
    color: #fff;
    background-color: #f3d19e;
    border-color: #f3d19e
}

.qf-button--warning.is-plain {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1
}

.qf-button--warning.is-plain:focus,.qf-button--warning.is-plain:hover {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff
}

.qf-button--warning.is-plain:active {
    background: #cf9236;
    border-color: #cf9236;
    color: #fff;
    outline: none
}

.qf-button--warning.is-plain.is-disabled,.qf-button--warning.is-plain.is-disabled:active,.qf-button--warning.is-plain.is-disabled:focus,.qf-button--warning.is-plain.is-disabled:hover {
    color: #f0c78a;
    background-color: #fdf6ec;
    border-color: #faecd8
}

.qf-button--danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c
}

.qf-button--danger:focus,.qf-button--danger:hover {
    background: #f78989;
    border-color: #f78989;
    color: #fff
}

.qf-button--danger:active {
    outline: none
}

.qf-button--danger.is-active,.qf-button--danger:active {
    background: #dd6161;
    border-color: #dd6161;
    color: #fff
}

.qf-button--danger.is-disabled,.qf-button--danger.is-disabled:active,.qf-button--danger.is-disabled:focus,.qf-button--danger.is-disabled:hover {
    color: #fff;
    background-color: #fab6b6;
    border-color: #fab6b6
}

.qf-button--danger.is-plain {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4
}

.qf-button--danger.is-plain:focus,.qf-button--danger.is-plain:hover {
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff
}

.qf-button--danger.is-plain:active {
    background: #dd6161;
    border-color: #dd6161;
    color: #fff;
    outline: none
}

.qf-button--danger.is-plain.is-disabled,.qf-button--danger.is-plain.is-disabled:active,.qf-button--danger.is-plain.is-disabled:focus,.qf-button--danger.is-plain.is-disabled:hover {
    color: #f9a7a7;
    background-color: #fef0f0;
    border-color: #fde2e2
}

.qf-button--info {
    color: #fff;
    background-color: #909399;
    border-color: #909399
}

.qf-button--info:focus,.qf-button--info:hover {
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff
}

.qf-button--info:active {
    outline: none
}

.qf-button--info.is-active,.qf-button--info:active {
    background: #82848a;
    border-color: #82848a;
    color: #fff
}

.qf-button--info.is-disabled,.qf-button--info.is-disabled:active,.qf-button--info.is-disabled:focus,.qf-button--info.is-disabled:hover {
    color: #fff;
    background-color: #c8c9cc;
    border-color: #c8c9cc
}

.qf-button--info.is-plain {
    color: #909399;
    background: #f4f4f5;
    border-color: #d3d4d6
}

.qf-button--info.is-plain:focus,.qf-button--info.is-plain:hover {
    background: #909399;
    border-color: #909399;
    color: #fff
}

.qf-button--info.is-plain:active {
    background: #82848a;
    border-color: #82848a;
    color: #fff;
    outline: none
}

.qf-button--info.is-plain.is-disabled,.qf-button--info.is-plain.is-disabled:active,.qf-button--info.is-plain.is-disabled:focus,.qf-button--info.is-plain.is-disabled:hover {
    color: #bcbec2;
    background-color: #f4f4f5;
    border-color: #e9e9eb
}

.qf-button--medium {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px
}

.qf-button--medium.is-round {
    padding: 10px 20px
}

.qf-button--medium.is-circle {
    padding: 10px
}

.qf-button--small {
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px
}

.qf-button--small.is-round {
    padding: 9px 15px
}

.qf-button--small.is-circle {
    padding: 9px
}

.qf-button--mini {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px
}

.qf-button--mini.is-round {
    padding: 7px 15px
}

.qf-button--mini.is-circle {
    padding: 7px
}

.qf-button--text {
    border-color: transparent;
    color: #409eff;
    background: transparent;
    padding-left: 0;
    padding-right: 0
}

.qf-button--text:focus,.qf-button--text:hover {
    color: #66b1ff;
    border-color: transparent;
    background-color: transparent
}

.qf-button--text:active {
    color: #3a8ee6;
    background-color: transparent
}

.qf-button--text.is-disabled,.qf-button--text.is-disabled:focus,.qf-button--text.is-disabled:hover,.qf-button--text:active {
    border-color: transparent
}

.qf-button-group {
    display: inline-block;
    vertical-align: middle
}

.qf-button-group:after,.qf-button-group:before {
    display: table;
    content: ""
}

.qf-button-group:after {
    clear: both
}

.qf-button-group>.qf-button {
    float: left;
    position: relative
}

.qf-button-group>.qf-button+.qf-button {
    margin-left: 0
}

.qf-button-group>.qf-button.is-disabled {
    z-index: 1
}

.qf-button-group>.qf-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.qf-button-group>.qf-button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.qf-button-group>.qf-button:first-child:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.qf-button-group>.qf-button:first-child:last-child.is-round {
    border-radius: 20px
}

.qf-button-group>.qf-button:first-child:last-child.is-circle {
    border-radius: 50%
}

.qf-button-group>.qf-button:not(:first-child):not(:last-child) {
    border-radius: 0
}

.qf-button-group>.qf-button:not(:last-child) {
    margin-right: -1px
}

.qf-button-group>.qf-button.is-active,.qf-button-group>.qf-button:not(.is-disabled):active,.qf-button-group>.qf-button:not(.is-disabled):focus,.qf-button-group>.qf-button:not(.is-disabled):hover {
    z-index: 1
}

.qf-button-group>.qf-dropdown>.qf-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--primary:first-child {
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--primary:last-child {
    border-left-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--primary:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.5);
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--success:first-child {
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--success:last-child {
    border-left-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--success:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.5);
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--warning:first-child {
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--warning:last-child {
    border-left-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--warning:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.5);
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--danger:first-child {
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--danger:last-child {
    border-left-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--danger:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.5);
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--info:first-child {
    border-right-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--info:last-child {
    border-left-color: hsla(0,0%,100%,.5)
}

.qf-button-group .qf-button--info:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.5);
    border-right-color: hsla(0,0%,100%,.5)
}

/* 导航栏navBar */
.qf-nav-bar {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: solid 10px black;
    font-size: 26px;
    box-sizing: border-box;
}